<template>
  <div class="payHistory">
    <div class="cardBlcok" @click="tab=1">
      <div class="card">
        <p>截止{{year}}年{{month}}月你已交党费共计{{total_money}}元</p>
        <p>有 {{leakage_num}} 次漏交 （点此补交)</p>
        <p>凝聚党员力量，增强党性信仰。</p>
      </div>
      <div class="shadow"></div>
    </div>
    <mu-tabs :value.sync="tab" @change="tabChange" color="#fff" indicator-color="#F47548" centered fixed-tabs>
      <mu-tab ripple>全部</mu-tab>
      <mu-tab ripple>未交</mu-tab>
    </mu-tabs>
      <div class="window" v-if="tab === 0">
        <mu-load-more class="history" :loading="loading" @load="load">
            <ul>
              <li v-for="(item,index) in historyList" :key="index" @click="toInfo(item)">
                <div class="content">
                  <p class="name">{{(item.create_time) | timeType('y')}}年{{item.create_time | timeType('m')}}月党费{{item.status==1?'已交纳':'未交纳'}}</p>
                  <p class="date">{{item.create_time | time}}</p>
                  <p class="money">应交党费{{item.misuse}}元</p>
                </div>
                <div v-if="item.category==1" class="btn">按时交费</div>
                <div v-if="item.category==2" class="btn">逾期补交</div>
                <div v-if="item.status==2" class="btn bu">点此补交</div>
              </li>
            </ul>
        </mu-load-more>
      </div>
    <div class="window" v-if="tab === 1">
    <mu-load-more class="history" :loading="loading" @load="load">
      <ul>
        <li v-for="(item,index) in historyListUn" :key="index" @click="toInfo(item)">
          <div class="content">
            <p class="name">{{(item.create_time) | time}}年{{item.create_time}}月党费未交纳</p>
            <p class="date">{{item.create_time}}</p>
            <p class="money">应交党费{{item.misuse}}元</p>
          </div>
          <div class="btn bu">点此补交</div>
        </li>
      </ul>
    </mu-load-more>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      p: 1,
      page: 10,
      tab:0,
      active: null,
      year: 0,
      month: 0,
      historyList: [],
      historyListUn:[],
      total_money: 0,
      leakage_num: 0,
      loading: false
    }
  },
  created () {
    this.getPayHistory()
    let now = new Date()
    this.year = now.getFullYear()
    this.month = now.getMonth() + 1
  },
  methods: {
    toInfo (item) {
      if(item.category){
        this.$router.push({ path: '/mine/PartyPayment/payInfo' , query: item })
      }else{
        this.$router.push({ path: '/mine/PartyPayment/pay' , query: item })
      }
    },
    async getPayHistory (status) {
      try {
        let params = {
          p: this.p,
          page: this.page,
          uid: JSON.parse(Cookies.get('user_71ydj')).id,
          status:status
        }
        const url = `applets/Pay/pay_history`
        let res = await this.$http.get(url, params)
        this.loading = false;
        this.$progress.done()
        if (res.code === 200) {
          this.total_money = res.data.total_money
          this.leakage_num = res.data.leakage_num
          res.data.list.forEach(e => {
            if(status){
              this.historyListUn.push(e)
            }else{
              this.historyList.push(e)
            }
          });
          if(!res.data.list.length&&this.p>1){
            this.p--
          }
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    async tabChange(e){
      this.tab = e
      try {
        let params = {
          p: 1,
          page: this.page * this.p,
          uid: JSON.parse(Cookies.get('user_71ydj')).id,
          status:e
        }
        const url = `applets/Pay/pay_history`
        let res = await this.$http.get(url, params)
        if (res.code === 200) {
          this.total_money = res.data.total_money
          this.leakage_num = res.data.leakage_num
          if(status){
            this.historyListUn = res.data.list
          }else{
            this.historyList = res.data.list
          }
        }
      } catch (e) {
        console.log('​catch -> e', e)
      }
    },
    load () {
      this.loading = true;
      this.p++
      this.getPayHistory()
    }
  }
}
</script>
<style lang="css">
.payHistory .window{
  height: calc(100% - 245px);
}
.payHistory .mu-tabs{
  position: relative;
  z-index: 97;
  height: 40px;
  margin-bottom: 15px;
}
.payHistory .mu-tab-link-highlight {
  width:16px !important;
  height:4px;
  background:rgba(244,117,72,1);
  border-radius:2px;
  margin-left: 28px;
}
.payHistory .mu-tab{
  font-size:15px;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(51,51,51,.5);
}
.payHistory .mu-tab-active{
  font-size:17px;
  font-family:PingFang-SC-Medium;
  font-weight:bold;
  color:rgba(51,51,51,1);
}
.payHistory .window{
  padding: 0 16px;
}
</style>
<style lang="scss" scoped>
.payHistory{
  position: relative;
  height: 100vh;
  width: 100vw;
  padding-top: 26px;
  .cardBlcok{
    position: relative;
    width: calc(100% - 32px);
    height:170px;
    margin:0 auto;
    margin-bottom: 20px;
    .card{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      width:100%;
      height:170px;
      background:url(../../../../assets/img/pay_history_card.png) no-repeat;
      background-size: 100% 170px;
      border-radius:10px;
      padding: 35px 23px;
      p{
        position: relative;
        font-size:15px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        margin-bottom: 20px;
        &:first-of-type{
          &::before{
            content: '';
            position: absolute;
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            width:6px;
            height:6px;
            background:rgba(255,153,119,1);
            border-radius:50%;
          }
        }
        &:last-of-type{
          position: absolute;
          bottom: 22px;
          right: 23px;
          margin: 0;
          font-size:13px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(255,255,255,.5);
          &::before{
            content: '';
            position: absolute;
            left: -92px;
            top: 50%;
            transform: translateY(-50%);
            width:76px;
            height:1PX;
            background-color: rgba(254,254,254,.3);
          }
        }
      }
    }
    .shadow{
      z-index: 98;
      position: absolute;
      bottom: -32px;
      left: 50%;
      transform: translateX(-50%);
      width: 359px;
      height: 210px;
      background: url(../../../../assets/img/pay_history_card_shadow.png) no-repeat;
      background-size: 359px 210px;
    }
  }
  .history{
    position: absolute;
    width: calc(100% - 32px);
    height:calc(100% - 280px);
    bottom: 0;
    padding: 10px 16px;
    box-sizing: border-box;
    background:rgba(254,254,254,1);
    border-radius:12px 12px 0 0;
    overflow: scroll;
    li{
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      border-bottom:1PX solid rgba(224,224,224,1);
      font-family:PingFang-SC-Medium;
      padding: 16px 0;
      box-sizing: border-box;
      .content{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        p{
          margin: 0;
        }
        .name{
          font-size:16px;
          font-weight:bold;
          color:rgba(51,51,51,1);
          margin-bottom: 16px;
        }
        .date,.money{
          font-size:14px;
          font-weight:500;
          color:rgba(153,153,153,1);
          margin-bottom: 0;
        }
        .date{
          margin-bottom: 12px;
        }
      }
      .btn{
        font-size:15px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(102,102,102,1);
        &.bu{
          font-weight:bold;
          color:rgba(235,77,68,1);
        }
      }
    }
  }
}
</style>
